<template>
    <div style="background:#f2f2f2">
        <header class="resviseTop">
            <img src="../../images/left.png" alt="" @click="$router.back(-1)">
            <span class="resvise_title">详情信息</span>
        </header>
        <div>
            <div class="basic">
                <div class="basic_number">
                    <div>
                        <span>{{ titleHead }}账号</span>
                    </div>
                    <div @click="tbnameShow = !tbnameShow">
                        <span v-if="!params.login">输入账号</span>
                        <span v-else>{{params.login}}</span>
                        <img src="../../img_myself/right.png" alt="">
                    </div>
                </div>
                <div class="basic_number" @click="gender_num = !gender_num">
                    <div>
                        <span>性别</span>
                    </div>
                    <div>
                        <span v-if="!params.gender">选择性别</span>
                        <span v-for="gender in genders" v-if="gender.inx == params.gender">{{gender.text}}</span>
                        <img src="../../img_myself/right.png" alt="">
                    </div>
                </div>
                <div class="basic_number" @click="older = !older">
                    <div>
                        <span>年龄</span>
                    </div>
                    <div>
                        <span v-if="!params.age">选择年龄</span>
                        <span v-else>{{params.age}}</span>
                        <img src="../../img_myself/right.png" alt="">
                    </div>
                </div>
                <div class="basicText">基本信息</div>
            </div>
            <!--信誉等级-->
            <div class="basic">
                <div class="rank" @click='gardehiden = !gardehiden' v-if="platform_tag != 'pinduoduo'">
                    <div>
                        <span>信用等级</span>
                        <i class="levelUpgrade" @click.stop="levelUp = !levelUp" >申请升级</i>
                    </div>
                    <div>
                        <span v-if="!params.level">选择信用等级</span>
                        <img :src="taoDengji_img[parseInt(params.level -1)]" alt=""
                             v-else-if="platform_tag == 'taobao'">
                        <img :src="jd_level[parseInt(params.level -1)]" alt="" v-else-if="platform_tag == 'jd'">
                        <img src="../../img_myself/right.png" alt="">
                    </div>
                </div>
                <div class="rank" @click="shoopClick">
                    <div>
                        <span>购物标签</span>
                    </div>
                    <div>
                        <span v-if="!categoryText">选择购物标签</span>
                        <span v-else> {{categoryText}}</span>
                        <img src="../../img_myself/right.png" alt="">
                    </div>
                </div>
                <div class="basicText">信誉等级</div>
            </div>
            <!--上传截图-->
            <div class="basic">
                <div class="bot_toload">
                    <div class="W_30" v-for="img in params.images"
                         v-if="(platform_id == '15' && (img.type == 5 || img.type == 6)) || (platform_id == '1' && (img.type == 2 || img.type == 3)) || (platform_id == '16' && img.type == 7)">
                        <div class="first_imgs">
                            <img :src="img.url" alt="">
                            <p v-if="img.type == 2">个人资料</p>
                            <p v-if="img.type == 3">我的评价</p>
                            <p v-if="img.type == 5">我的京东</p>
                            <p v-if="img.type == 6">个人信息</p>
                            <p v-if="img.type == 7">我的资料</p>
                            <input type="file" @change="preview1($event, img.type)"
                                   accept="image/*" name="image" multiple="multiple">
                        </div>
                        <p @click="exampleUrl = img.imgurl">示例样图</p>
                    </div>

                </div>
                <div class="basicText">截图</div>
            </div>
            <div style="padding: 0 .3rem">
                <p class="remark" v-if="remark">拒绝理由：{{ remark }}</p>
            </div>
            <!--提交按钮-->
            <div class="bottom_banner">
                <div class="addTao" @click="addSubmit()" v-if="addTao == 0 || addTao == 2">提交</div>
            </div>
        </div>
        <!--选择性别-->
        <div v-if="gender_num">
            <div class="box_show"></div>
            <div class="gender">
                <div class="divs">
                    <p v-for="gender in genders" @click="params.gender = gender.inx, gender_num = !gender_num">{{
                        gender.text }}</p>
                </div>
                <div @click="gender_num = !gender_num">取消</div>
            </div>
        </div>
        <!--选择年龄-->
        <div v-if="older">
            <div class="box_show"></div>
            <div class="selsects">
                <picker :columns="slots" @change="onValuesChange"/>
                <span @click="older = !older">确定</span>
            </div>
        </div>

        <!--等级选择 -->
        <div v-if="gardehiden || levelUp">
            <div class="box_show"></div>
            <div class="selsects">
                <picker :columns="taoDengji" @change="Changegarde" v-if="platform_tag == 'taobao'"/>
                <picker :columns="jd_level_text" @change="Changegarde" v-else-if="platform_tag == 'jd'"/>
                <span @click="gardehiden = !gardehiden" v-if="!levelUp">确定</span>
                <span v-else @click="levelUpFun()">确定</span>
            </div>
        </div>
        <!--购物标签-->
        <div v-if="shoopHide">
            <div class="box_show"></div>
            <div class="shoopChange">
                <div>
                    <p @click="shoopHide = !shoopHide">确定</p>
                    <ul>
                        <li v-for="(arr,index) in categoriesArr" :class="{ active: categoriesArr[index].classi }"
                            @click="categoriesFun(arr, index)">{{arr.category_name}}
                        </li>
                    </ul>
                </div>
                <p @click="shoopHide = !shoopHide" class="cancelShoop">取消</p>
            </div>
        </div>
        <!--<div v-if="shoopHide">-->
        <!--<div class="box_show"></div>-->
        <!--<div class="shoopChange">-->
        <!--<div>-->
        <!--<p @click="shoopHide = !shoopHide">确定</p>-->
        <!--<ul>-->
        <!--<li v-for="(arr,index) in shoop" :class="{active: shoop[index].isclick }"-->
        <!--@click="ChangeShoop(shoop,index)">{{arr.name}}-->
        <!--</li>-->
        <!--</ul>-->
        <!--</div>-->
        <!--<p @click="shoopHide = !shoopHide" class="cancelShoop">取消</p>-->
        <!--</div>-->
        <!--</div>-->

        <!-- 淘宝账号 -->
        <van-dialog
            v-model="tbnameShow"
            show-cancel-button
            :before-close="beforeClose"
        >
            <field
                v-model="params.login"
                label="用户名"
                placeholder="请输入用户名"
            />
        </van-dialog>

        <div class="bgmon" v-if="addTao != 0 && addTao != 2"></div>
        <div class="fixed_color"></div>

        <!-- 示例截图 -->
        <div id="exampleImg" v-if="exampleUrl" >
            <div>
                <img :src="exampleUrl" alt="">
            </div>
        </div>

        <div class="modalzz" v-if="exampleUrl"@click="exampleUrl = false"></div>
        <div id="loading" v-show="loding">
            <img src="https://imgshangjia.renqidaren.com/uploads/20180910/ed54624966042c63a0cb0e9fa7418ece.gif" alt="">
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {Picker, Field} from 'vant';
    import Dialog from 'vant/lib/Dialog';
    // import 'vant/lib/picker/index.css';
    import 'vant/lib/index.css';
    import api from '../../utils/api';
    import * as qiniu from 'qiniu-js';
    import {GenNonDuplicateID} from '../../utils/config';

    Vue.use(Dialog);
    export default {
        name: "detailsTao",
        components: {
            Picker, Dialog, Field
        },
        data: () => ({
            genders: [
                {text: '男', inx: 1},
                {text: '女', inx: 2}
            ],
            taoDengji_img: [
                require('@/img_myself/s_red_1.gif'),
                require('@/img_myself/s_red_2.gif'),
                require('@/img_myself/s_red_3.gif'),
                require('@/img_myself/s_red_4.gif'),
                require('@/img_myself/s_red_5.gif'),

                require('@/img_myself/s_blue_1.gif'),
                require('@/img_myself/s_blue_2.gif'),
                require('@/img_myself/s_blue_3.gif'),
                require('@/img_myself/s_blue_4.gif'),
                require('@/img_myself/s_blue_5.gif'),

                require('@/img_myself/s_crown_1.gif'),
                require('@/img_myself/s_crown_2.gif'),
                require('@/img_myself/s_crown_3.gif'),
                require('@/img_myself/s_crown_4.gif'),
                require('@/img_myself/s_crown_5.gif'),
            ],
            jd_level: [
                require('@/img_myself/jd_level_1.png'),
                require('@/img_myself/jd_level_2.png'),
                require('@/img_myself/jd_level_3.png'),
                require('@/img_myself/jd_level_4.png'),
                require('@/img_myself/jd_level_5.png'),
            ],
            taoDengji: ['1心', '2心', '3心', '4心', '5心', '1钻', '2钻', '3钻', '4钻', '5钻', '1皇冠', '2皇冠', '3皇冠', '4皇冠', '5皇冠'],
            jd_level_text: ['大众会员', '铜牌会员', '银牌会员', '金牌会员', '钻石会员'],
            gender_num: false,    //标识  选择性别
            older: false,     //标识  选择年龄
            shoopHide: false, //标识 购物商标
            gardehiden: false, //标识 选择等级
            isShoop: '', //标识 显示隐藏‘选择购物标签’
            addTao: 0,     //标识 是否是添加淘宝号
            change_grade: [],
            Myself_onloadImg: '',
            assess_onloadImg: '',
            slots: [],
            change_dengji: true,
            tbnameShow: false,
            params: {
                login: '',
                gender: '',
                age: '',
                level: '',
                category: [],
                images: [
                    {
                        name: '个人资料',
                        url: require('../../img_myself/plus.png'),
                        type: 2,
                    },
                    {
                        name: '我的评价',
                        url: require('../../img_myself/plus.png'),
                        type: 3,
                    },
                    {
                        name: '我的京东',
                        url: require('../../img_myself/plus.png'),
                        type: 5,
                    },
                    {
                        name: '个人信息',
                        url: require('../../img_myself/plus.png'),
                        type: 6,
                    },
                    {
                        name: '我的资料',
                        url: require('../../img_myself/plus.png'),
                        type: 7,
                    }
                ]
            },
            categoriesArr: [],
            categoryText: '',
            remark: '',
            levelUp: false,
            consumer_id: '',
            platform_id: '',
            titleHead: '淘宝',
            platform_tag: '',
            exampleUrl: '',
            dateClick: true,
            loding: false
        }),
        methods: {

            Changegarde: function (picker, value, index) {
                this.params.level = index + 1;
                this.change_dengji = false;
            },
            // 选择购物标签
            categoriesFun(arr, index) {
                var bl = true;
                if (arr.classi) {
                    bl = false;
                    for (let i in this.params.category) {
                        if (this.params.category[i].id == arr.category_id) {
                            this.params.category.splice([i], 1)
                        }
                    }
                } else {
                    bl = true;
                    if (this.params.category.length >= 3) {
                        this.$toast('最多选择三个')
                        return false;
                    }
                    this.params.category.push({
                        'id': arr.category_id,
                        'text': arr.category_name
                    });
                }
                this.categoryText = '';
                for (let i in this.params.category) {
                    if (this.params.category[i]) {
                        this.categoryText += this.params.category[i].text + ',';
                    }
                }
                this.categoryText = this.substrRem(this.categoryText)
                this.$set(this.categoriesArr[index], 'classi', bl)
            },
            // 去掉最后一位
            substrRem(String) {
                return String.substr(0, String.length - 1);
            },
            shoopClick: function () {     //弹出购物选择框
                this.shoopHide = true;
                if (this.change_grade.constructor !== Array) {
                    if (this.change_grade.length > 0) {
                        this.change_grade = this.change_grade.split(',')
                    } else {
                        this.change_grade = []
                    }
                }
            },
            onValuesChange(picker, value, index) {
                this.params.age = value
            },
            async preview1(file, int) {
                var file = file.target.files[0];
                var img = new Image(), url = img.src = URL.createObjectURL(file)
                var _that = this;

                img.onload = function () {
                    URL.revokeObjectURL(url)
                };

                if (file) {
                    _that.loding = true;
                    let putExtra = {
                        fname: file.name,
                        params: {},
                        mimeType: ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']
                    };
                    let config = {
                        useCdnDomain: true,
                        region: null
                    };
                    let observer = {
                        next(res) {

                        },
                        error(err) {
                            _that.loding = false;
                            return false;
                        },
                        complete(res) {
                            _that.loding = false;
                            for (let i in _that.params.images) {
                                if (_that.params.images[i].type == int) {
                                    _that.params.images[i].url = 'https://imgapp.renqidaren.com/' + res.key
                                }
                            }
                        }
                    }
                    // 获取七牛token
                    let resp = await api.request('/qiniu_token', 'get', {})
                    var observable = qiniu.upload(file, GenNonDuplicateID(32), resp.data.data, putExtra, config)
                    observable.subscribe(observer)
                }
            },
            backBangTao: function () {
                this.$router.push({path: '/task/bindingTao'})
            },
            beforeClose(action, done) {
                if (action === 'confirm') {
                    done()
                } else {
                    done();
                }
            },
            async addSubmit() {
                if (this.dateClick) {
                    this.dateClick = false
                    setTimeout(function () {
                        this.dateClick = true
                    }, 2000)
                    var _that = this;
                    this.params.level = this.params.level || 0;
                    var param = {...this.params}
                    var imgs = []
                    for (var img in param.images) {
                        delete  param.images[img].name;
                        delete  param.images[img].imgurl;
                        if (_that.platform_tag == 'jd' && (param.images[img].type == 5 || param.images[img].type == 6)) {
                            imgs.push(param.images[img])
                        } else if (_that.platform_tag == 'pinduoduo' && (param.images[img].type == 7)) {
                            imgs.push(param.images[img])
                        } else if (_that.platform_tag == 'taobao' && (param.images[img].type == 2 || param.images[img].type == 3)) {
                            imgs.push(param.images[img])
                        }
                    }
                    param.images = JSON.stringify(imgs);
                    var categoryt = ''
                    for (let i in param.category) {
                        categoryt += param.category[i].id + ',';
                    }
                    categoryt = this.substrRem(categoryt)
                    param.category = categoryt;

                    param.platform_id = _that.platform_id;

                    // this.level == '' ? 0 : this.level;

                    if (this.addTao == 2) {
                        param.consumer_id = _that.consumer_id;
                        await api.request('/consumers/update', 'post', param,).then(function (res) {
                            _that.$toast('申请成功，待审核');
                            setTimeout(function () {
                                // _that.$router.push({path: '/task/bindingTab'})
                                _that.$router.replace({
                                    name: 'bindingTao',
                                    query: {
                                        platform_id: _that.$route.params.platform_id,
                                        title: _that.$route.params.title,
                                        platform_tag: _that.$route.params.platform_tag
                                    }
                                })
                            }, 1500)
                        })
                    } else {
                        await api.request('/consumers', 'post', param).then(function (res) {
                            _that.$toast('申请成功，待审核')
                            setTimeout(function () {
                                // _that.$router.push({path: '/task/bindingTab'})
                                _that.$router.replace({
                                    name: 'bindingTao',
                                    query: {
                                        platform_id: _that.$route.params.platform_id,
                                        title: _that.$route.params.title,
                                        platform_tag: _that.$route.params.platform_tag
                                    }
                                })
                            }, 1500)
                        })
                    }
                }

            },
            async levelUpFun() {
                var _that = this;
                var param = {
                    consumer_id: this.addTao,
                    level: this.params.level
                }
                this.levelUp = !this.levelUp
                await api.request('/consumers/levelUpgrade', 'post', param).then(function (res) {
                    _that.$toast(res.data.message)
                    setTimeout(function () {
                        // _that.$router.push({path: '/task/bindingTao'})
                        _that.$router.replace({
                            name: 'bindingTao',
                            query: {
                                platform_id: _that.$route.params.platform_id,
                                title: _that.$route.params.title,
                                platform_tag: _that.$route.params.platform_tag
                            }
                        })
                    }, 1000)
                })
            }
        },
        mounted() {
            document.body.scrollTop = 0;
            for (var i = 15; i <= 100; i++) {
                this.slots.push(i)
            }
        },
        async created() {
            let resp = await api.request('/common', 'get', {})
            this.params.images[0].imgurl = resp.data.data.taobao_persion;
            this.params.images[1].imgurl = resp.data.data.taobao_evaluate;
            this.params.images[2].imgurl = resp.data.data.jingdong_evaluate;
            this.params.images[3].imgurl = resp.data.data.jingdong_persion;
            this.params.images[4].imgurl = resp.data.data.pinduoduo_persion;



            var _that = this;
            _that.addTao = this.$route.params.add_Tao;
            _that.remark = this.$route.params.remark;
            _that.consumer_id = this.$route.params.add_Tao;
            _that.platform_id = this.$route.params.platform_id;
            _that.titleHead = this.$route.params.title;
            _that.platform_tag = this.$route.params.platform_tag;

            await api.request('/categories', 'get', {}).then(function (res) {
                _that.categoriesArr = res.data.data;
            });
            if (_that.addTao != 0) {
                await api.request('/consumer', 'get', {consumer_id: _that.addTao}).then(function (res) {
                    if (res.data.data.status.val == 2) {
                        _that.addTao = res.data.data.status.val;
                        var categoryEd = res.data.data.category.split(',');
                        //购物标签
                        for (var i in _that.categoriesArr) {
                            for (var ed in categoryEd) {
                                if (_that.categoriesArr[i].category_id == categoryEd[ed]) {
                                    _that.params.category.push({
                                        'id': _that.categoriesArr[i].category_id,
                                        'text': _that.categoriesArr[i].category_name
                                    });
                                    _that.$set(_that.categoriesArr[i], 'classi', true)
                                }
                            }
                        }

                    }
                    // 图片
                    for (var img in _that.params.images) {
                        for (var resimg in res.data.data.images) {
                            if (res.data.data.images[resimg].type == _that.params.images[img].type) {
                                _that.params.images[img].type = res.data.data.images[resimg].type;
                                _that.params.images[img].url = res.data.data.images[resimg].url;
                            }
                        }
                    }
                    // _that.params = res.data.data;
                    _that.categoryText = res.data.data.categories;
                    _that.params.login = res.data.data.login;
                    _that.params.gender = res.data.data.gender;
                    _that.params.level = res.data.data.level;
                    _that.params.age = res.data.data.age;
                })
            }
        },
        watch: {
            exampleUrl(url) {
                if (url) {
                    document.body.setAttribute("style", "overflow:hidden;");
                } else {
                    document.body.setAttribute("style", "overflow:visible;");
                }
            }
        }
    }
</script>

<style scoped="css">
    @import "../../style/detailsTao.css";

    .bgmon {
        opacity: .6;
        position: fixed;
        z-index: 64;
        top: 1.3rem;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .remark {
        margin-top: .2rem;
        font-size: .35rem;
        background: #FF6262;
        color: #fff;
        padding: .3rem;
        border-radius: .3rem;
    }

    .levelUpgrade {
        background: #ff8746;
        color: #fff;
        padding: 0 .3rem;
        font-size: 3.6vw;
        border-radius: .1rem;
        display: inline-block;
        margin-left: .2rem;
        position: relative;
        z-index: 65;
    }
    .fixed_color {
        background: #f2f2f2;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    #exampleImg {
        z-index: 9899;
    }
</style>
